---
title: "Project One | Code Stitch Web Designs"
description: "Meta description for the page"
permalink: "/project-one/"
---

{% extends "layouts/base.html" %}

{% block head %}
    <link rel="stylesheet" href="/assets/css/projects.css">
{% endblock %}

{% block body %}

    <!-- ============================================ -->
    <!--                   Banner                     -->
    <!-- ============================================ -->

    <div id="banner-310">
        <div class="cs-container">
            <span class="cs-int-title">Project One Gallery</span>
            <div class="cs-breadcrumbs">
                <a href="/" class="cs-link">Home</a>
                <a href="/project-one/" class="cs-link cs-active">Project One Gallery</a>
            </div>
        </div>
        <!--Background Image-->

        <picture class="cs-background">
            <!--Mobile Image-->
            <source media="(max-width: 600px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 640, height: 600 }) | avif %}" type="image/avif">
            <source media="(max-width: 600px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 640, height: 600 }) | webp %}" type="image/webp">
            <source media="(max-width: 600px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 640, height: 600 }) | jpeg %}" type="image/jpeg">
            <!--Tablet Image-->
            <source media="(max-width: 1024px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2048, height: 942 }) | avif %}" type="image/avif">
            <source media="(max-width: 1024px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2048, height: 942 }) | webp %}" type="image/webp">
            <source media="(max-width: 1024px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2048, height: 942 }) | jpeg %}" type="image/jpeg">
            <!--Desktop Image-->
            <source media="(min-width: 1024px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2500, height: 628 }) | avif %}" type="image/avif">
            <source media="(min-width: 1024px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2500, height: 628 }) | webp %}" type="image/webp">
            <source media="(min-width: 1024px)" srcset="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2500, height: 628 }) | jpeg %}" type="image/jpeg">
            <img src="{% getUrl "/assets/images/cabinets.jpg" | resize({ width: 2500, height: 628 }) | jpeg %}" alt="library" width="1920" height="482" loading="eager" decoding="async">
        </picture>
    </div>

    <!-- ============================================ -->
    <!--                   Gallery                    -->
    <!-- ============================================ -->

    <section id="gallery-48">
        <div class="cs-container">
            <div class="cs-content">
                <span class="cs-topper">Our Portfolio</span>
                <h2 class="cs-title">Et orci volutpat, back up generator installations</h2>
            </div>
            <div class="cs-image-group">
                <div class="cs-row cs-row-1">
                    <!-- Row 1-->
                    <picture class="cs-picture cs-picture-1">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port1.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port1.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port1.jpg" alt="new hallway" width="420" height="567">
                    </picture>
                    <picture class="cs-picture cs-picture-2">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port4.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port4.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port4.jpg" alt="new home construction" width="420" height="630">
                    </picture>
                    <picture class="cs-picture cs-picture-3">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port7.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port7.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port7.jpg" alt="building a new wall" width="420" height="512">
                    </picture>
                    <!-- To add more images, copy and paste this row's picture tags here in order from cs-picture-1 to cs-picture-3 and they will maintain the same layout-->
                </div>
                <!-- Row 2 -->
                <div class="cs-row cs-row-2">
                    <picture class="cs-picture cs-picture-1">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port2.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port2.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port2.jpg" alt="new kitchen" width="420" height="492">
                    </picture>
                    <picture class="cs-picture cs-picture-2">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port5.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port5.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port5.jpg" alt="apartment addition" width="420" height="517">
                    </picture>
                    <picture class="cs-picture cs-picture-3">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port8.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port8.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port8.jpg" alt="kew kitchen cabinets" width="420" height="629">
                    </picture>
                    <!-- To add more images, copy and paste this row's picture tags here in order from cs-picture-1 to cs-picture-3 and they will maintain the same layout-->
                </div>
                <!-- Row 3 -->
                <div class="cs-row cs-row-3">
                    <picture class="cs-picture cs-picture-1">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port3.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port3.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port3.jpg" alt="new black window structure" width="420" height="625">
                    </picture>
                    <picture class="cs-picture cs-picture-2">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port6.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port6.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port6.jpg" alt="kitchen rebovation" width="420" height="452">
                    </picture>
                    <picture class="cs-picture cs-picture-3">
                        <source media="(max-width: 600px)" srcset="/assets/images/portfolio/port9.jpg">
                        <source media="(min-width: 601px)" srcset="/assets/images/portfolio/port9.jpg">
                        <img loading="lazy" decoding="async" src="/assets/images/portfolio/port9.jpg" alt="bathroom renovation" width="420" height="629">
                    </picture>
                    <!-- To add more images, copy and paste this row's picture tags here in order from cs-picture-1 to cs-picture-3 and they will maintain the same layout-->
                </div>
            </div>
            <a href="/contact/" class="cs-button-solid">Get Started</a>
        </div>
    </section>

    {% include 'sections/cta.html' %}

{% endblock %}